<%--
  Created by IntelliJ IDEA.
  User: zhangzhengwei2006
  Date: 2024/2/1/0001
  Time: 20:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>部门管理</title>
    <script src="<%=request.getContextPath() %>/static/jq/jquery-3.3.1.min.js"></script>
    <style>
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        body {
            user-select: none;
        }

        a {
            color: white;
            text-decoration: none;
        }

        ul, li {
            list-style: none;
        }

        img {
            width: 17px;
            margin-left: 40px;
            margin-right: 10px;
        }

        .box-left {
            width: 350px;
            /*width: auto;*/
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 5px;
            background-color: #7e7c7c;
        }


        .box-left > ul > li ul {
            display: none;
        }

        .box-left a {
            height: 50px;
            width: max-content;
            display: flex;
            align-items: center;
        }

        .li-div {
            display: flex;
            /*background-color: red;*/
            width: 150px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 10px;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }

        .li-div > button {
            width: 45px;
            height: 25px;
            color: white;
            border-radius: 5px;
        }

        .li-div > button > span {
            display: none;
        }

        .li-div > button:hover {
            cursor: pointer;
        }

        .baoc {
            background-color: #efefef;
            display: none;
            width: 550px;
            height: 200px;
            position: absolute;
            z-index: 9999;
            left: 450px;
            top: 150px;
            border-radius: 10px;
        }

        .baoc > div:not(.baoc>.parent_id) {
            display: flex;
            margin-top: 10px;
            justify-content: space-evenly;
        }

        .baoc > div > div > span {
            width: 200px;
            margin-left: 10px;
            display: inline-block;
        }

        .baoc > div > div > span[class='name'] {
            width: 100px;
        }

        .baoc > div > div > input[type='text'] {
            width: 150px;
            border-radius: 5px;
        }

        .baoc > div > div > input {
            height: 25px;
            display: inline-block;
            margin-left: 10px;
            padding-left: 5px;
        }

        input::placeholder {
            color: #7e7c7c;
        }

        input:focus {
            outline: none;
        }

        select:focus {
            outline: none;
        }

        select {
            height: 25px;
            margin-left: 10px;
        }

        .baoc > .parent_id {
            margin-left: 30px;
            margin-top: 10px;
        }

        .baoc > div > div > button {
            width: 50px;
            height: 25px;
            background-color: #098dee;
            border-radius: 5px;
        }

        .baoc > div > div > button:first-child {
            background-color: chartreuse;
            margin-right: 10px;
        }

        .baoc > div > div > button:hover {
            cursor: pointer;
        }

        #addDiv {
            height: 50px;
            display: flex;
            margin-left: 10px;
            flex-direction: row;
            align-items: center;
            color: white;
        }

        #addDiv > button {
            width: 40px;
            height: 20px;
            color: #fff;
            margin-left: 10px;
            border-radius: 5px;
            background-color: cornflowerblue;
        }
        #addDiv>img {
                width: 17px;
                margin-left: 0px;
                margin-right: 5px;
        }
        #addBut:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box-left">
    <div id="addDiv">
        <img src="<%=request.getContextPath()%>/img/部门.png" />
        <h2>部门管理</h2>
        <button id="addBut">添加</button>
    </div>
    <hr style="background-color: #b3b2b2;width: 100%;height: 1px"/>
    <ul id="box-ul">
        <%-- <li>
             <a href="" style="margin-left: 20px;" onclick="aul(this)">
                 审核管理
                 <img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">
             </a>
             <ul>
                 <li>
                     <a href="" style="margin-left: 40px;" onclick="aul(this)">
                         帖子审核
                         <img src="<%=request.getContextPath()%>/img/backtop白.png" alt=""></a>
                     <ul>
                         <li>
                             <a href="" style="margin-left: 60px;" onclick="aul(this)">
                                 帖子审核2
                                 <img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">
                             </a>
                         </li>
                     </ul>
                 </li>
                 <li>
                     <a href="" style="margin-left: 40px;" onclick="aul(this)">
                         帖子审核
                         &lt;%&ndash;                            <img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">&ndash;%&gt;
                     </a>
                 </li>
             </ul>
         </li>--%>
    </ul>
</div>
<div class="baoc">
    <div class="title"></div>
    <div class="fuj">
        <div><label>父级名称:</label><span class="name"></span></div>
        <div><label>父级描述:</label><span class="remark"></span></div>
    </div>
    <div>
        <div><label>部门名称:</label><input type="text" name="name" placeholder="输入部门名称" value=""></div>
        <div><label>部门描述:</label><input type="text" name="remark" placeholder="输入部门描述" value=""></div>
    </div>
    <div>
        <div style="display:flex;"><label>部门状态:</label><input type="radio" name="status" value="0">冻结<input
                type="radio" name="status" value="1" checked>正常<input type="radio" name="status" value="2">删除
        </div>
        <div class="seq">
            <label>部门排序:</label><input class="seqval" type="text" value="">
        </div>
    </div>
    <div class="parent_id"></div>
    <div>
        <div class="cz"></div>
    </div>
</div>
<script>
    $(function () {
        init();
    })

    let id; //当前点击的部门id
    let statu = 1;// 部门状态
    let parentSelectId;// 调换的父级id部门
    let selectName;
    // 获取单选按钮的val
    $(".baoc>div>div>input[type='radio']").change(function () {
        statu = $(this).val();
    })

    // 获取下拉的val
    function selectParent(d) {
        parentSelectId = $(d).val();
    }

    // 确定
    function sure(n) {
        let inputName = $(".baoc>div>div>input[name='name']").val();// 部门名称
        let inputRemark = $(".baoc>div>div>input[name='remark']").val();// 部门描述
        let inputSeq = $(".seqval").val();
        if (n == 0) {
            $.ajax({
                async: true,
                url: '<%=request.getContextPath() %>/back/dept?ac=selectName',
                type: 'get',
                data: {'name': inputName},
                dataType: "json",
                success: function (d, res) {
                    if (d) {
                        $.ajax({
                            async: true,
                            url: '<%=request.getContextPath() %>/back/dept?ac=save',
                            type: 'post',
                            data: {
                                'name': inputName,
                                'remark': inputRemark,
                                'status': statu,
                                'seq': inputSeq,
                                'parent_id': 0,
                                'operator': sessionStorage.getItem("AdminName"),
                                'operate_ip': window.location.hostname
                            },
                            dataType: "json",
                            success: function (d) {
                                alert(d.message);
                                $("#box-ul").html('');
                                cancel();
                                init();
                            }
                        })
                    } else {
                        alert("部门名称重复了!!!")
                    }
                }
            })
        } else if (n == 1) {
            $.ajax({
                async: true,
                url: '<%=request.getContextPath() %>/back/dept?ac=selectName',
                type: 'get',
                data: {'name': inputName},
                dataType: "json",
                success: function (d, res) {
                    if (d) {
                        $.ajax({
                            async: true,
                            url: '<%=request.getContextPath() %>/back/dept?ac=save',
                            type: 'post',
                            data: {
                                'name': inputName,
                                'remark': inputRemark,
                                'status': statu,
                                'seq': inputSeq,
                                'parent_id': id,
                                'operator': sessionStorage.getItem("AdminName"),
                                'operate_ip': window.location.hostname
                            },
                            dataType: "json",
                            success: function (d) {
                                alert(d.message);
                                $("#box-ul").html('');
                                cancel();
                                init();
                            }
                        })
                    } else {
                        alert("部门名称重复了!!!")
                    }
                }
            })
        } else if (n == 2) {
            //updateById
            $.ajax({
                async: true,
                url: '<%=request.getContextPath() %>/back/dept?ac=updateById',
                type: 'post',
                data: {
                    'id': id,
                    'name': inputName,
                    'seq': inputSeq,
                    'remark': inputRemark,
                    'status': statu,
                    'parent_id': parentSelectId,
                    'operator': sessionStorage.getItem("AdminName"),
                    'operate_ip': window.location.hostname
                },
                dataType: "json",
                success: function (d) {
                    if (d) {
                        alert("修改成功")
                        $("#box-ul").html('');
                        cancel();
                        init();
                    } else {
                        alert("修改失败")
                    }
                }
            })
        }
    }

    // 取消
    function cancel() {
        $(".cz").html('');
        $(".seqval").value = '';
        let namedom = $(".name");
        let remarkdom = $(".remark");
        let inputs = $(".baoc>div>div>input[type='text']");
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
        }
        namedom.text();
        remarkdom.text();
        $(".baoc").css("display", "none")
    }

    //添加顶级部门
    $("#addBut").click(function () {
        $(".title").text("添加顶级部门")
        $(".baoc").css('height', '200px');
        $(".cz").html('');
        $(".seqval").value = 1;
        $(".parent_id").html('');
        // $('.fuj').css("display", "flex");
        $('.fuj').css("display", "none");
        $(".cz").append(`<button onclick="cancel()">取消</button><button onclick="sure(0)">确定</button>`)
        $(".baoc").css("display", "block");
    })

    //添加
    function save(e) {
        $(".title").text("添加")
        $(".baoc").css('height', '200px');
        $(".baoc>div>div>input[name='name']").val('');
        $(".baoc>div>div>input[name='remark']").val('');
        $(".cz").html('');
        $(".seqval").val('1')
        $(".parent_id").html('');
        $('.fuj').css("display", "flex");
        $(".cz").append(`<button onclick="cancel()">取消</button><button onclick="sure(1)">确定</button>`)
        id = $(e).children("span").text();
        let namedom = $(".name");
        let remarkdom = $(".remark");
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/dept?ac=selectById',
            type: 'get',
            data: {'id': id},
            dataType: "json",
            success: function (d) {
                namedom.text(d.data['name'])
                remarkdom.text(d.data['remark'])
            }
        })
        $(".baoc").css("display", "block");
    }

    //修改
    function update(e) {
        $(".cz").html('');
        // $(".seq").html('');
        $(".parent_id").html('');
        $(".baoc").css('height', '200px');
        $(".title").text("修改")
        $(".cz").append(`<button onclick="cancel()">取消</button><button onclick="sure(2)">确定</button>`)
        id = $(e).children("span").text();
        $('.fuj').css("display", "none");
        let inputName = $(".baoc>div>div>input[name='name']");
        let inputRemark = $(".baoc>div>div>input[name='remark']");
        // let seq = $('.seq')
        // 添加下拉框
        $('.parent_id').append(`<label>父级部门:</label><select class="parentSelect" onchange="selectParent(this)" name="parentId"><option value=""></option></select>`);
        // <option value="1">1</option>
        let option;
        let spid;

        // 获取数据
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/dept?ac=selectById',
            type: 'get',
            data: {'id': id},
            dataType: "json",
            success: function (d) {
                inputName.val(d.data['name']);
                inputRemark.val(d.data['remark']);
                spid = '';
                let level = d.data['level'].toString().split(".");
                spid = level[level.length - 1];
                parentSelectId = spid;
                $(".seqval").val(d.data['seq']);
            }
        })

        // 获取所有部门
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/dept?ac=selectAllDeptList',
            type: 'get',
            dataType: "json",
            success: function (d) {
                d.forEach(e => {
                    option = option + `<option id="o${e.id}" value="${e.id}">${e.name}</option>`
                })
                $(".parentSelect").append(option)
                $("#o" + spid).attr("selected", "selected");
                spid = '';
            }
        })
        $(".baoc").css("display", "block");
    }

    //删除
    function del(e) {
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/dept?ac=delete',
            type: 'post',
            data: {"id": $(e).children("span").text()},
            dataType: "json",
            success: function (d) {
                alert(d.message);
                if (d.code == 200) {
                    $("#box-ul").html('');
                    cancel();
                    init();
                }

            }
        })

    }

    // 数据加载
    function init() {
        $.ajax({
            async: true,
            url: '<%=request.getContextPath() %>/back/dept?ac=select',
            type: 'get',
            dataType: "json",
            success: function (data) {
                // console.log(data)
                // for (let i = 0; i < data.length; i++) {
                traverseTree(data);
                // }
            }
        })
    }

    let temporarilyId;
    let temporarilyId2;
    let temporarilyImg;
    let temporarilyMarginLeft = 40;
    let temporarilyWidth = 200;
    let boxUl = $("#box-ul");

    function traverseTree(node) {
        // temporarily = [];
        // if (node.children === null) return;
        // console.log(node)
        for (let i = 0; i < node.length; i++) {
            let item = node[i];

            if (item.parent_id == 0) {
                temporarilyMarginLeft = 40;
                temporarilyId = item.id;
                if (item.children.length > 0) {
                    temporarilyImg = `<img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">`
                } else {
                    temporarilyImg = '';
                }
                $("#box-ul").append(`
                <li style="position: relative;">
                    <a class="a" href="" style="margin-left: 20px;" onclick="aul(this)">
                        ${item.name}
                        ${temporarilyImg}
                    </a>
                    <div class="li-div">
                        <button style="background-color: #098dee;" onclick="save(this)"><span>${item.id}</span>添加</button>
                        <button style="background-color: #1ba784;" onclick="update(this)"><span>${item.id}</span>修改</button>
                        <button style="background-color: red;" onclick="del(this)"><span>${item.id}</span>删除</button>
                    </div>
                    <ul id="${item.id}"></ul>
                </li>
                `);
            }
            if (item.parent_id == temporarilyId) {
                if (item.children.length > 0) {
                    temporarilyImg = `<img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">`
                } else {
                    temporarilyImg = '';
                }
                $("#" + temporarilyId).append(`
                    <li  style="position: relative;">
                        <a class="a" href="" style="margin-left: ${temporarilyMarginLeft}px;" onclick="aul(this)">
                            ${item.name}
                            ${temporarilyImg}
                        </a>
                        <div class="li-div">
                            <button style="background-color: #098dee;" onclick="save(this)"><span>${item.id}</span>添加</button>
                            <button style="background-color: #1ba784;" onclick="update(this)"><span>${item.id}</span>修改</button>
                            <button style="background-color: red;" onclick="del(this)"><span>${item.id}</span>删除</button>
                         </div>
                        <ul id="${item.id}"></ul>
                    </li>`)
                if (item.children.length > 0) {
                    let num = $("#" + temporarilyId).children("li").children("a").css("margin-left");
                    temporarilyMarginLeft = parseInt(num) + 20;
                    // temporarilyId2 = temporarilyId;
                    temporarilyId = item.id;
                    $(".box-left").css("width", parseInt($(".box-left").css("width")) + 5 + "px");
                } else {
                    temporarilyId = $("#" + temporarilyId).parent().parent().attr("id");
                    temporarilyMarginLeft = parseInt($("#" + temporarilyId).children("li").children("a").css("margin-left"));
                }
            } else {
                if ($("#" + item.parent_id).length > 0) {
                    let numa = $("#" + item.parent_id).children("li").children("a").css("margin-left");
                    temporarilyMarginLeft = parseInt(numa);
                    if (item.children.length > 0) {
                        temporarilyImg = `<img src="<%=request.getContextPath()%>/img/backtop白.png" alt="">`
                    } else {
                        temporarilyImg = '';
                    }
                    $("#" + item.parent_id).append(`
                    <li  style="position: relative;">
                        <a  class="a" href="" style="margin-left: ${temporarilyMarginLeft}px;" onclick="aul(this)">
                            ${item.name}
                            ${temporarilyImg}
                        </a>
                        <div class="li-div">
                            <button style="background-color: #098dee;" onclick="save(this)"><span>${item.id}</span>添加</button>
                            <button style="background-color: #1ba784;" onclick="update(this)"><span>${item.id}</span>修改</button>
                            <button style="background-color: red;" onclick="del(this)"><span>${item.id}</span>删除</button>
                         </div>
                        <ul id="${item.id}"></ul>
                    </li>`)
                    if (item.children.length > 0) {
                        let num = $("#" + item.parent_id).children("li").children("a").css("margin-left");
                        temporarilyMarginLeft = parseInt(num) + 20;
                        // temporarilyId2 = temporarilyId;
                        temporarilyId = item.id;
                        $(".box-left").css("width", parseInt($(".box-left").css("width")) + 5 + "px");
                    } else {
                        // temporarilyId = $("#" + temporarilyId).parent().parent().attr("id");
                        temporarilyMarginLeft = parseInt($("#" + item.parent_id).children("li").children("a").css("margin-left"));
                    }
                }
            }
            if (item.children && item.children.length > 0) {
                traverseTree(item.children);
            }
        }
    }

    // 点击显示子的
    let ul1 = "1";
    let temporarilyLi;

    function aul(a) {
        event.preventDefault();
        selectName = $(a).text();
        if (ul1 == "1") {
            ul1 = $(a).next("div").next("ul");
            temporarilyLi = $(a).parent("li");
        }

        let ul2 = $(a).next("div").next("ul");
        let img2 = $(a).children("img");

        if (ul2.css("display") == "none") {
            img2.attr("src", "<%=request.getContextPath()%>/img/backbottom白.png");
            if (ul1.css("display") == "block" && ul2.parent("li").parent("ul").is(boxUl)) {
                traverseTreeUl(temporarilyLi)
                ul1 = $(a).next("div").next("ul");
                temporarilyLi = $(a).parent("li");
            }
            ul2.css("display", "block");
        } else {
            img2.attr("src", "<%=request.getContextPath()%>/img/backtop白.png");
            traverseTreeUl($(a).parent("li"))
            ul2.css("display", "none"); // 收起ul
        }
    }

    //递归
    function traverseTreeUl(node) {
        node.children("ul").css("display", "none");
        node.children("a").children("img").attr("src", "<%=request.getContextPath()%>/img/backtop白.png");
        for (let i = 0; i < node.children("ul").children("li").length; i++) {
            let item = node.children("ul").children("li")[i];
            $(item).children("a").children("img").attr("src", "<%=request.getContextPath()%>/img/backtop白.png");
            $(item).children("ul").css("display", "none");
            if ($(item).children("ul") && $(item).children("ul").children("li").length > 0) {
                traverseTreeUl($(item))
            }
            ul1 = "1";
        }
    }
</script>
</body>
</html>
